<template>
  <div>
    <div v-cloak class="bg-gray">
      <div class="time-area">
        <p @click="showTimePicker">{{$common.formatTime(tempDate, 'Y年M月') }}<van-icon name="arrow-down"/></p>
        <h2>{{ fullData && listData && listData.length > 0 ? '¥ ' + total : '- -' }}</h2>
        <p><small>实发金额总和</small></p>
      </div>
      <van-cell-group v-if="fullData && listData && listData.length > 0">
        <h4 class="group-title">基本信息</h4>
        <van-cell title="工号" :value="fullData.advance.user_info.num"/>
        <van-cell value-class="extra-value" title="身份证号" :value="fullData.advance.user_info.identity_card_num"/>
        <van-cell title="部门" :value="fullData.advance.user_info.departName"/>
        <van-cell title="岗位" :value="fullData.advance.user_info.positionName"/>
        <van-cell title="职级" :value="fullData.advance.user_info.rank_name"/>
        <van-cell title="分位" :value="fullData.advance.user_info.pointsa_name"/>
        <template v-for="item in listData" v-if="returnVisible(item)">
          <h4 class="group-title">{{ item.s_o_name }}</h4>
          <template v-for="second in item.children">
            <van-cell title-class="extra-title" v-for="cell in second.children" :title="cell.s_o_name" :value="'¥ ' + cellData[cell.s_o_key]">
            </van-cell>
          </template>
        </template>
        <p class="no-more-data">没有更多了</p>
      </van-cell-group>
      <div v-else class="no-data-img fill-padding-top">
        <img src="../assets/meeting/no-data.png">
        <p class="no-data">暂无工资数据</p>
      </div>
      <div class="bottom-area" v-if="fullData && listData && listData.length > 0">
        <van-button type="info" size="large" :disabled="s_d_confirm == 1" @click="checkSalary">{{ s_d_confirm == 1 ? '已确认' : '点击确认'}}</van-button>
      </div>
    </div>
    <van-popup v-model="popupVisible" position="bottom">
      <van-datetime-picker
        ref="date"
        @confirm="(value) => { confirm(true) }"
        @cancel="confirm(false)"
        v-model="tempDate"
        type="year-month"
        :swipe-duration="300"
        :min-date="minDate"/>
    </van-popup>
  </div>
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
        popupVisible: false,
        lastTime: new Date(),
        tempDate: new Date(),
        minDate: new Date('1950-01-01'),

        idSearch: true, // 默认状态下以id查询 筛选日期后 变为false, 且永不再改变
        listData: [],
        cellData: [],
        total: 0,
        s_d_confirm: '1',
        fullData: ''
      }
    },
    mounted () {
      this.$bridge.callHandler('navTitle', {title: '工资条'})
      this.getSalaryDetail('id')
    },
    methods: {
      returnVisible(item) {
        console.log(item.s_o_key)
        return item.s_o_key == 'key_66' ? false : true
      },
      showTimePicker() {
        this.popupVisible = true
      },
      getSalaryDetail(type) {
        this.$toast({
          duration: 0,
          forbidClick: true,
          className: 'loading-toast',
          icon: require('../assets/loading.gif'),
        })
        let config = {
          method: 'post',
          url: `${this.$common.basePath}aatp5/public/index.php/salary/salary/app_payslip`,
          data: {
            uid: this.$store.state.userId
          }
        }
        if(this.idSearch) {
          config.data.s_d_id = this.$route.query.id || ''
        } else {
          config.data.time = this.tempDate.getTime() / 1000
          config.data.s_d_id = ''
        }
        this.$axios(config).then(res => {
          this.fullData = ''
          this.fullData = res.data // 完整的data, 在需要时使用
          if(res.data) {
            this.listData = res.data.result.s_s_options
            this.s_d_confirm  = res.data.advance.s_d_confirm
            this.cellData = res.data.advance.s_d_count
            this.total = res.data.advance.net_salary
          }
          
          this.$toast.clear()
          if(this.idSearch) {// 成功后变为false
            this.idSearch = false
            this.tempDate = new Date(res.data.result.s_a_month*1000)
          }
        })
        .catch(err => {
          this.$toast.clear()
        })
      },
      confirm(boolean) {
        if(boolean) {
          this.lastTime = new Date(this.tempDate.getTime())
          this.getSalaryDetail('time')
        } else {
          this.tempDate = new Date(this.lastTime.getTime())
        }
        this.popupVisible = false
      },
      checkSalary() {
        let self = this

        self.$dialog.confirm({
          title: '提示',
          message: '确认完所有信息了吗?',
          cancelButtonText: '再检查下',
        }).then(() => {
          self.$axios.post(`${self.$common.basePath}aatp5/public/index.php/salary/salary/salary_confirmation`, {
            uid: self.$store.state.userId,
            s_d_id: self.fullData.advance.s_d_id
          })
          .then(res => {
            self.s_d_confirm = '1'
          }).catch(() => {
            this.$toast({
             icon: 'cross',
             message: err.msg ? err.msg : '网络请求失败!'
            })
          });
        }).catch(() => {
          
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  .time-area {
    position: fixed;
    z-index: 9;
    top: 0;
    height: 130px;
    width: 100vw;
    background: linear-gradient(to right, #307aff, #64abfd);
    border: none;
    & > * {
      color: #fff;
      text-align: center;
    }
    h2 {
      margin: 0;
    }
  }
  .group-title {
    color: #333;
    padding: 15px;
    margin: 0;
  }
  .van-cell-group, p.no-data{
    padding-top: 130px;
    padding-bottom: 61px;
  }
  .bottom-area {
    position: fixed;
    z-index: 9;
    height: 50px;
    width: 100vw;
    bottom: 0;
    padding: 5px 15px; 
    background: #fff;
    border-top: 1px solid #f5f5f5;
  }
  .van-button {
    width: calc(100vw - 30px);
  }
  .no-more-data, .no-data {
    color: #999;
    text-align: center;
  }
  .attachment-list {
    p {
      padding: 15px;
      margin-top: 0;
      background-color: #f5f5f5;
    }
  }
  .fill-padding-top {
    padding-top: 200px;
    padding-bottom: 105px;
    p {
      padding: 50px 0;
    }
  }
  .bg-gray {
    min-height: calc(100vh);
  }
  .extra-title span {
    display: inline-block;
    min-width: 210px;
    height: 35px;
    overflow-x: visible;
    text-align: left;
  }
  .extra-value {
    float: right;
    position: absolute;
    right: 15px;
  }
</style>